<template>
	<div>
		<Modal :value="visible" @on-visible-change="onChangeVisible" footer-hide :z-index="900" fullscreen>
			<div class="car-popup noScroll">
				<div class="car-popup-top">
					<div class="car-popup-title">
						<div class="car-popup-title-ani" :class="{'car-popup-title-anis':title.length>20}">
							<div class="car-popup-title-ani-one" :class="{'title_20':title.length<21}" :style="{'width':titleWidth+'px'}">
								{{title}}
							</div>
						<!-- <div class="" v-if="title.length<21">
							{{title}}
						</div> -->
						</div>
						<!-- <vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2" v-else-if="types">
							<ul class="item">
								<li v-for="item in newsList" v-text="item.title"></li>
							</ul>
						</vue-seamless-scroll> -->
						<Icon custom="i-icon icon-guanbi" size="26" color="#a0a0a0" class="car-popup-title-icon"
							@click.stop="onClickCancel" />
					</div>
				</div>
				<div class="car-popup-cont noScroll">
					<div class="car-popup-cont-post" :class="{'car-popup-cont-tree':type}">
						<slot></slot>
					</div>
				</div>
			</div>
		</Modal>
	</div>
</template>

<script>
	import vueSeamlessScroll from 'vue-seamless-scroll'
	export default {
		model: {
			prop: 'visible',
			event: 'onChange'
		},
		props: {
			title: String,
			visible: Boolean,
			status: {
				type: String,
				default: ''
			},
			faclStatus: {
				type: String,
				default: ''
			},
			type: {
				type: Boolean,
				default: false
			}
		},
		components: {
			vueSeamlessScroll
		},
		watch:{
			visible(newVal){
				this.newsList = []
				this.newsList.push({"title":this.title})
				this.types = true
				if(this.title.length<21){
					this.titleWidth = 424
				}else{
					this.titleWidth = this.title.length*27
				}
			}
		},
		data() {
			return {
				statusFaclTitle: {
					1: '已报废',
					2: '维修中',
					3: '已拆除',
					4: '暂停'
				},
				statusTitle: {

				},
				newsList: [],
				types:false,
				str:'',
				titleWidth:0
			}
		},
		computed: {
			optionLeft() {
				return {
					direction: 2,
					limitMoveNum: 1,
					hoverStop: false
				}
			}
		},
		methods: {
			onClickCancel() {
				this.types = false
				this.$emit('onClickCancel')
				this.$emit('onChange', false)
			},
			onChangeVisible(boo) {
				if (!boo) {
					this.$emit('onChange', false)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.car-popup {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 600;
		padding-top: 110px;
		padding-bottom: 10px;
		background: url(../../../../assets/new/wcbackground.png) 0 0 no-repeat;
		background-size: 100% 100%;

		.car-popup-top {
			width: 100%;
			height: 105px;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.car-popup-title {
			background-image: url(../../../../assets/new/wctop.png);
			background-size: 100% 100px;
			background-repeat: no-repeat;
			width: 90%;
			height: 111px;
			line-height: 68px;
			box-sizing: border-box;
			font-size: 28px;
			font-weight: bold;
			text-align: center;
			color: #23CEFD;
			position: initial;
			display: block;
			margin: 0 auto;
			padding: 0;

			.car-popup-title-icon {
				position: absolute;
				top: 20px;
				right: 10px;
				cursor: pointer;
			}
		}

		.car-popup-cont {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			overflow: auto;
			position: relative;

			.car-popup-cont-post {
				height: 810px;
				width: 1250px;
				display: flex;
				justify-content: center;
				position: absolute;
        top:0;
				left: 50%;
        margin-top:0;
				margin-left: -625px;
			}

			.car-popup-cont-tree {
				top: 0;
				margin-top: 0;
			}
		}
	}

	.car-popup-title-ani {
		width: 424px;
		height: 68px;
		margin: 0 auto;
		overflow: hidden;
		position: relative;

		div {
			white-space: nowrap;
		}

		
	}
	.car-popup-title-anis:hover{
		.car-popup-title-ani-one {
			animation: run 5s linear 0s infinite;
		}
	}

	@keyframes run {
		0% {
			transform: translateX(0)
		}
		
		100% {
			transform: translateX(-100%)
		}
	}

	.title_20 {
		width: 424px;
		font-size: 24px;
	}

	::v-deep {
		.ivu-modal-body {
			background-color: #0C1224;
		}
	}

	.seamless-warp2 {
		overflow: hidden;
		height: 50px;
		width: 480px;
		margin: 0 auto;

		ul.item {
			width: 580px;

			li {
				float: left;
				margin-right: 10px;
			}
		}
	}
</style>
